<template>
    <div class="card">
        <DataTable v-model:filters="filters" v-on:filter="onFilter" :value="store.state.UserTable.data" scrollable :paginator="true" :rows="100"  showGridlines size="small" dataKey="id"
            filterDisplay="row" :loading="store.state.UserTable.loading"
            :globalFilterFields="['createtime', 'ip', 'ip_addr', 'host', 'agent', 'event']">

            <!-- 全局过滤的input框 -->
            <template #header>
                <div class="flex">
                    <IconField iconPosition="left">
                        <InputIcon>
                            <i class="pi pi-search" />
                        </InputIcon>
                        <InputText v-model="filters['global'].value" placeholder="全局搜索" />
                    </IconField>
                    <div iconPosition="right">表格数据：{{ filterLength }}</div>
                </div>
            </template>

            <!-- 没有数据的时候显示 -->
            <template #empty> 暂无数据 </template>
            <!-- 加载数据的时候显示 -->
            <template #loading> 加载数据中，请稍后... </template>

            <!-- 常规筛选，通过input框匹配 -->
            <Column field="createtime" header="时间" style="width: 190px;min-width: 190px;" sortable>
                <template #body="{ data }">
                    {{ data.createtime }}
                </template>
                <template #filter="{ filterModel, filterCallback }">
                    <InputText v-model="filterModel.value" type="text" @input="filterCallback()" class="p-column-filter"
                        placeholder="关键词" />
                </template>
            </Column>

            <!-- 多选筛选 -->
            <Column header="域名" filterField="host" :showFilterMenu="false" :filterMenuStyle="{ width: '14rem' }"
                style="width: 220px; min-width: 220px; max-width: 220px;">
                <template #body="{ data }">
                    <div class="flex align-items-center gap-2">
                        <span>{{ data.host }}</span>
                    </div>
                </template>
                <template #filter="{ filterModel, filterCallback }">
                    <MultiSelect v-model="filterModel.value" @change="filterCallback()" :options="store.state.UserTable.hostsOptions"
                        placeholder="筛选" class="p-column-filter"  :maxSelectedLabels="1">
                    </MultiSelect>
                </template>
            </Column>


            <!-- 常规筛选，通过input框匹配 -->
            <Column field="ip" header="ip" style="width: 160px; min-width: 160px; max-width: 160px;">
                <template #body="{ data }">
                    {{ data.ip }}
                </template>
                <template #filter="{ filterModel, filterCallback }">
                    <InputText v-model="filterModel.value" type="text" @input="filterCallback()" class="p-column-filter"
                        placeholder="Search by name" />
                </template>
            </Column>

            <!-- 常规筛选，通过input框匹配 -->
            <Column field="ip_addr" header="ip归属地" style="width: 160px; min-width: 160px; max-width: 160px;">
                <template #body="{ data }">
                    {{ data.ip_addr }}
                </template>
                <template #filter="{ filterModel, filterCallback }">
                    <InputText v-model="filterModel.value" type="text" @input="filterCallback()" class="p-column-filter"
                        placeholder="关键词" />
                </template>
            </Column>

            <!-- 常规筛选，通过input框匹配 -->
            <Column field="agent" header="平台/浏览器" style="width: 220px; min-width: 220px; max-width: 220px;">
                <template #body="{ data }">
                    {{ data.agent }}
                </template>
                <template #filter="{ filterModel, filterCallback }">
                    <InputText v-model="filterModel.value" type="text" @input="filterCallback()" class="p-column-filter"
                        placeholder="关键词" />
                </template>
            </Column>

            <!-- 多选一筛选 -->
            <Column field="event" header="事件" :showFilterMenu="false" :filterMenuStyle="{ width: '14rem' }"
            style="width: 160px; min-width: 160px; max-width: 160px;">
                <template #body="{ data }">
                    <Tag :value="data.event" :severity="getSeverity(data.event)" />
                </template>
                <template #filter="{ filterModel, filterCallback }">
                    <Dropdown v-model="filterModel.value" @change="filterCallback()" :options="eventsOptions"
                        placeholder="选择" class="p-column-filter"  :showClear="true" />
                </template>
            </Column>

        </DataTable>
    </div>
</template>

<script setup>

import IconField from 'primevue/iconfield';
import InputIcon from 'primevue/inputicon';
import { ref } from 'vue';
import DataTable from 'primevue/datatable';
import Column from 'primevue/column';
import InputText from 'primevue/inputtext';
import MultiSelect from 'primevue/multiselect';
import Dropdown from 'primevue/dropdown';
import Tag from 'primevue/tag';
import { FilterMatchMode } from 'primevue/api';
import { useStore } from 'vuex';

const store = useStore();
const filters = ref({
    global: { value: null, matchMode: FilterMatchMode.CONTAINS },
    createtime: { value: null, matchMode: FilterMatchMode.CONTAINS},
    host: { value: null, matchMode: FilterMatchMode.IN },
    ip: { value: null, matchMode: FilterMatchMode.CONTAINS },
    ip_addr: { value: null, matchMode: FilterMatchMode.CONTAINS },
    agent: { value: null, matchMode: FilterMatchMode.CONTAINS },
    event: { value: null, matchMode: FilterMatchMode.EQUALS },
});

// event字段值
const eventsOptions = ref(['添加line', '页面访问']);
const getSeverity = (eventValue) => {
    return eventValue === "添加line" ? 'danger' : 'success';
};

// 表格过滤后的值
const filterLength = ref(5000)
function onFilter (event) {
    filterLength.value = event.filteredValue.length
}

</script>

<style scoped lang="less">
.card {
    height: 100%;
    /* 或者可以设置为具体的高度，例如 500px */
    /* 其他样式 */
}

.card .p-datatable {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.card .p-datatable .p-datatable-wrapper {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    /* 允许在需要时垂直滚动 */
}

.card .flex{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
</style>